﻿<link href="~/Content/eventCalendar.css" rel="stylesheet" />
<link href="~/Content/eventCalendar_theme.css" rel="stylesheet" />
<script src="~/Scripts/jquery.eventCalendar.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        // Left Category
        
        $.ajax({
            type: "GET",
            async: false,
            url: "/board/getcategorylist",
            success: function (data) {
                if (data.CategoryData) {
                    var html = "";

                    for (var i = 0; i < data.CategoryData.length; i++) {
                        if (data.CategoryData[i].categoryName == "*")
                            html += "<li data-category=" + data.CategoryData[i].categoryName + " ><a href='/board/list?category=*'><span class='badge pull-right'>" + data.CategoryData[i].articleCount + "</span>All Article</a></li>";
                        else if(data.CategoryData[i].categoryName == "")
                            html += "<li data-category=" + escape(data.CategoryData[i].categoryName) + "><a href='/board/list'><span class='badge pull-right'>" + data.CategoryData[i].articleCount + "</span>미분류</a></li>";
                        else
                            html += "<li data-category=" + escape(data.CategoryData[i].categoryName) + "><a href='/board/list?category=" + escape(data.CategoryData[i].categoryName) + "'><span class='badge pull-right'>" + data.CategoryData[i].articleCount + "</span>" + data.CategoryData[i].categoryName + "</a></li>";
                    }
                    $("#ulArticleCategory").html(html);

                    var curCategory = getQueryVariable("category", "");
                    $("#ulArticleCategory li").each(function (idx, li) {
                        if ($(li).attr("data-category") == curCategory) {
                            $(li).addClass("active");
                        } else {
                            $(li).removeClass("active");
                        }
                    });
                } else {

                }
            },
            error: function (xhr, status, error) {

            }
        });
    });
</script>
<style type="text/css">
    .rcate {
        border: solid 2px #bbbbbb;
        padding: 5px;
        margin:0;
    }
</style>

<div class="rcate">
    <div class="col-sm-12 alert alert-info h4" >
        Categories
    </div>
    <ul id="ulArticleCategory" class="nav nav-pills nav-stacked">
        <li class="active"><a href="#"><span class="badge pull-right">52</span>Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#"><span class="badge pull-right">52</span>Home</a></li>
    </ul>
    <hr />
    <div class="row" style="margin-top:20px" >
        <div class="col-sm-offset-1 col-sm-10 alert alert-success h5" style="margin-bottom:10px" >
            날짜별 게시글
        </div>    
        <div id="eventCalendar" class="col-sm-offset-1 col-sm-10"   style="padding:0px"></div>
        <script type="text/ecmascript">
            var eventsInline = [];

            $.ajax({
                type: "GET",
                async: false,
                url: "/board/getarticlesbyday",
                success: function (data) {
                    $.each(data.BoardData, function (index, value) {

                        var article = new Object();
                        article["date"] = value.WriteDate;
                        article["type"] = "meeting";
                        article["title"] = value.Title;
                        article["description"] = "";
                        article["url"] = "/board/details/" + value.Idx;

                        eventsInline.push(article);
                    });
                },
                error: function (xhr, status, error) {

                }
            });


            $("#eventCalendar").eventCalendar({
                eventsLimit: 2,
                monthNames: ["January", "February", "March", "April", "May", "June",
                    "July", "August", "September", "October", "November", "December"],
                dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
                dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
                txt_noEvents: "게시된 글이 존재하지 않습니다.",
                txt_SpecificEvents_prev: "",
                txt_SpecificEvents_after: "Articles :",
                txt_next: "next",
                txt_prev: "prev",
                txt_NextEvents: "Articles :",
                txt_GoToEventUrl: "See the article",
                showDayAsWeeks: true,
                startWeekOnMonday: false,
                showDayNameInCalendar: true,
                showDescription: true,
                onlyOneDescription: true,
                openEventInNewWindow: false,
                eventsScrollable: false,
                jsonDateFormat: 'human', // you can use also "human" 'YYYY-MM-DD HH:MM:SS'
                moveSpeed: 500,	// speed of month move when you clic on a new date
                moveOpacity: 0.15, // month and events fadeOut to this opacity
                jsonData: eventsInline, 	// to load and inline json (not ajax calls)
                cacheJson: true
            });
        </script>
    </div>
</div>